const HtmlWebpackPlugin = require("html-webpack-plugin");
const { resolve } = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
//设置nodejs环境变量
process.env.NODE_ENV = 'production'
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin")

//压缩css插件 css-minimizer-webpack-plugin

module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[{
            test:/\.css$/,
            //提取js中的css为单独文件
            use:[MiniCssExtractPlugin.loader,
                'css-loader',
                /**
                 * 浏览器兼容性处理：postcss->postcss-loader postcss-preset-env
                 * 帮postcss找到package.json中的browserslist里的配置,通过配置加载指定的css兼容性样式
                 * 
                 *   "browserslist":{
                 *      //开发环境：设置node环境变量：process.env.NODE_ENV = development
                        "development":[
                        "last 1 chrome version",
                        "last 1 firefox version",
                        "last 1 safari version"
                        ],
                        //生产环境：默认时看生产环境
                        "production":[
                        ">0.2%",
                        "not dead",
                        "not op_mini all"
                        ]
                    }

                    修改postcss-loader的配置
                 */
                {
                    loader:'postcss-loader',
                    options:{
                        postcssOptions:{
                            plugins:[
                                require("postcss-preset-env")
                            ]
                        }
                    }
                }
            ]
        }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            //对输出的css文件重命名
            filename:'css/built.css'
        }),
        new CssMinimizerWebpackPlugin()
    ],
    mode:'development'
}